<?php session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  	<head>
	<!--<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="no-cache">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="expires" content="0"> -->
 	 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<?php require_once("scriptsMap.php");?>
 

  </head>
  <body onload="loadlibraries();" onunload="closeOrRefreshMap(event);" onResize="resizear()">

  <div id="mapLoadingPanel" >
    	<table width="100%" height="100%" border="0"><tr><td align="center" valign="middle">
            <img border="0" src="images/loader.gif" /><br />
			<span style="color:#666666; font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif">CARGANDO...</span><br />
			<div id="mapLoadingBar" style="width:350px; height:40px;"></div>
        </td></tr></table>
  </div>

  <!-- DIVS PARA FUNCIONAMIENTO DEL DHTML WINDOW -->
  <div id="dhtmlwindowholder"><span style="display:none">.</span></div>
  <div id="interVeil"></div>
  <!-- ----------------------------------------- -->
    <style type="text/css">
		.buttonBARAddMapa {
		   width: 62px;
		   height: 54px;
		   background: no-repeat url('./images/toolbar/map_add.png');
		   }
		.buttonBARAlinearMapa {
		   width: 62px;
		   height: 54px;
		   background: no-repeat url('./images/toolbar/map_visualizacion2a.png');
		 }
		.buttonBARMaximizeMapa {
		   width: 62px;
		   height: 54px;
		   background: no-repeat url('./images/toolbar/maximizar2.png');
		   }
		.buttonBARMonitorMapa {
		   width: 64px;
		   height: 54px;
		   background: no-repeat url('./images/toolbar/map_monitor.png');
		   }
		.buttonBARSaveMapa {
		   width: 62px;
		   height: 54px;
		   background: no-repeat url('./images/toolbar/map_saveall.png');
		   }
    	.color-divNroMap{
    		background-color :#000000;
    		opacity: 1;
    		font-weight: bolder;
    		color: white;
    	}
     	.my_CSS3_id {
		  border: 1px solid #000;
		  -moz-box-shadow: 0 0 1em #0000FF;
		  -webkit-box-shadow: 0 0 1em #0000FF;
		  box-shadow: 0 0 1em  #0000FF;

 		}
 		.monitorShow{
 			position:absolute;
 			opacity:0.9;
 			height: 20%;
 		}
		#sortable { list-style-type: none; margin: 0; padding: 0; }
		#sortable li { margin: 3px 0px 3px 0; padding: 1px; float: left;  height:395px;  text-align: center; }
		
		#tabs { margin-top: 1em; }
		#tabs li {float:left; list-style: none;}
		#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
	
   	</style>
   	<?php require_once("scriptsMaps.js.php"); ?>
    
    <div id="gMapContainer" style="visibility:hidden;">
    <div id="gMapHeader" style="width:100%;">
    	<table id="map_selector_table" cellpadding="0" cellspacing="0" border="0" width="100%" height="58">
    	<tr>
           <td style="margin-left: 10px;">
           	 <div id="toolBarTop">
           	 <table>
           	 <tr>
           	 	<td>
           	 		<img src="./images/toolbar/tres.png" id="imgCantidadMapas"/>
           	 	</td>
           	 	<td>
           	 		<button class="buttonBARAddMapa" type="button" onclick="agregarMapa();"/>
           	 	</td>
           	 	<td>
           	 		<input type="hidden" name="mapsAlign" id="mapsAlign" value="2">
           	 		<!-- <button id="btnBARAlinearMapa" class="buttonBARAlinearMapa" type="button" onclick="AlinearMapas();setearImagenBtnStyleFromCantidadMapas();"/>--> 
           	 		 <img id="imgBARAlinearMapa"  src="./images/toolbar/map_visualizacion2a.png"   onclick="AlinearMapas(); setearImagenBtnStyleFromCantidadMapas();"/>
           	 	</td>
           	 	<td>
           	 		<button id="btnMaxMinMap" class="buttonBARMaximizeMapa" type="button" onclick="MaxMinMaps();"/>
           	 	</td>
           	 	<td>
           	 		<button class="buttonBARMonitorMapa" type="button" onclick="collapseMonitor();"/>
           	 	</td>
           	 	<td>
           	 		<button id="btnGuardar" class="buttonBARSaveMapa" type="button" onclick="Guardar();"/>
           	 	</td>
           	 </div>
           </td>
           <td width="300px" align="rigth">
            	<?php if ($LOGIN->isPRO){ ?>
            	<div style="height:58px; width:300px; background:url(imagenes/logomapsPro.jpg) center no-repeat; float:right; text-align:right;">
                <?php } else { ?>
				<div style="height:58px; width:300px; background:url(imagenes/logomaps.jpg) center no-repeat; float:right; text-align:right;">
                <?php } ?>
                	<div style="width:100%; height:20px;"><img id="busyImg" src="images/loader_pulse.gif" style="vertical-align:bottom" align="right"></div>
                    <div style="width:100%"><img id="alertChatIncomming" src="images/chat/alertChatIncomming.gif" style="vertical-align:bottom; display:none;" align="right"></div>
                </div>
            </td>
        </tr>
        </table>
    </div>

    <div id="gMapMenuBar">

        <!-- DIV generico para crear el contenido de las ventanas DHTMLWindow -->
        <div id="genericDHTMLWindowDiv" style="display:none; text-align:left;" align="left"></div>
        <table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
        <tr>
        <td width="10" valign="middle" align="center" style="background:#E3E3E3 url(images/collapsableBarBG.gif) repeat-y; cursor:pointer;" bgcolor="#FFC0C0" onClick="collapseMenuBar();" >
        	<div id="sliceMenuBarIcon" class="sliceMenuBarIconOut"></div>
        </td>
        <td valign="top">
 	    <div id="AccordionMenu" class="Accordion" tabindex="0">

	  	<?php
	  		if($LOGIN->objetivoDB == 5){
	  			include('GMapPanels/fijos.php');
	  		}
	  		include('GMapPanels/vehiculos2.php');
			include('GMapPanels/seguimiento.php');
			include('GMapPanels/seleccion.php');
			if($LOGIN->objetivo == 4){
				if($LOGIN->PERMISOSAlias[3]){
					include('GMapPanels/historico.php');
				}
			}else{
				include('GMapPanels/historico.php');
			}
			if ($LOGIN->PERMISOS[4])
				include('GMapPanels/mispuntos.php');
			if ($LOGIN->PERMISOS[5])
				include('GMapPanels/miszonas.php');
			if ($LOGIN->PERMISOS[6])
				include('GMapPanels/reglas.php');
			include('GMapPanels/miscelaneas.php');
		?>
		</div>
        </td>
        </tr>
        </table>
    </div>
    <div id="gMapMainContent" style="overflow:scroll;">
    	<ul id="sortable">
    		<?php
    		for($i=0;$i<6;$i++){
    			$j=$i+1;
    		?>
				<li class="ui-state-default" id="map<?=$i?>" >
				<div id="nroMap<?=$i?>">
					<span id="textNro<?=$i?>"><?=$j?></span>
					<div align="right" style="float: right;"><img onmouseover="cambiarCursor(2);" alt="cerrar" src="images/close.gif" onclick="closeMap(<?=$i?>);"></div>
					<div align="right" style="float: right;"><img onmouseover="cambiarCursor(2);" width="18px" height="17px" alt="cerrar" src="images/guardar.png" onclick="guardarMap(<?=$i?>);"></div>
				</div>
					<div id="map_canvas<?=$i?>" oncontextmenu="return false;"></div>
				</li>
			<?php
    		}?>
    	</ul>

    </div>
 	  <div id="TableroContainerMonitorDiv" class="Tablero tablero-general" unselectable="on">
		<div class="TableroContainer-header"><div class="TableroContainer-button-div">
		<span class="TableroContainer-button" title="Cerrar el tablero" style="cursor: pointer;" onclick="closeTablero();">[x]&nbsp;</span></div>
		</div>
		<table width="100%" cellspacing="0" cellpadding="0" border="0">
		<tbody>
		<tr>
		<td><div class="TableroLateral" style="height: 250px;"></div></td>
		<td width="680px"><div class="TableroContainer" style="height: 250px;">
			<div class="TableroContainer-container" style="height: 100%; overflow: hidden;">
				<div style="display: block; width: 100%; text-align: center; overflow: hidden;" id="tablero_content">
				   <table align="center" width="680" cellspacing="0" cellpadding="0" border="0">
				   	  <tr>
				        <td colspan="5">&nbsp;</td>
				      </tr>
					  <tr>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td rowspan="3" id="posVelocimetro" valign="middle" align="center" width="190"></td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				      </tr>
				      <tr>
				        <td rowspan="2" id="posFuelandtemp" valign="middle" align="center" width="120"></td>
				        <td id="posRpm" valign="middle" align="center" width="120"></td>
				        <td id="posBrujula" valign="middle" align="center" width="110"></td>
				        <td rowspan="2" id="posVoltimetro" valign="middle" align="center"></td>
				      </tr>
				      <tr>
				        <td rowspan="2" id="posIndGral" valign="middle" align="center"></td>
				        <td rowspan="2" id="posPuertas" valign="middle" align="center"></td>
				      </tr>
				      <tr>
				        <td style="font-family:arial;font-size:9px;color:#828282;">Odometro parcial</td>
				        <td>&nbsp;</td>
				        <td style="font-family:arial;font-size:9px;color:#828282;" align="center">Odometro total</td>
				      </tr>
				      <tr>
				        <td id='posOdometroParcial' valign="middle" align="center"></td>
				        <td colspan="3" valign="middle" align="center">
				        	<table cellpadding="0" cellspacing="0" border="0">
				            	<tr>
				                	<td id='posDisplayTablero' valign="middle" align="center"></td>
				                    <td valign="middle" align="left">
				                    	&nbsp;
				                    	<img src="js/tablero/images/BTNseguir.gif" border="1" onclick="seguirTablero();" onmouseover="this.border=0;" onmouseout="this.border=1;" title="Seguir el movil del tablero" border="0" style="cursor:pointer;"/>
				                        <img src="js/tablero/images/BTNcentrar.gif" onclick="centrarTablero();" title="Centrar el mapa en el movil del tablero" border="1" onmouseover="this.border=0;" onmouseout="this.border=1;" style="cursor:pointer;"/>
				                    </td>
				                </tr>
				            </table>
				        </td>
				        <td id='posOdometroTotal' valign="middle" align="center"></td>
				      </tr>
				   </table>
			</div>
   	 	</div>
   	 	</div></td><td><div class="TableroLateral" style=" height: 250px;"></div></td></tr></tbody></table>
   	 	</div>

   	 <div style="clear: both;top:99%;opacity:0.9;position:absolute;z-index:1020;" id="monitorMenu">
    	<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
    	<tr>
	    	<td width="10" valign="middle" bgcolor="#ffc0c0" align="center" onclick="collapseMonitor();" style="background: url(&quot;images/collapsableBarBG.gif&quot;) repeat-y scroll 0% 0% rgb(227, 227, 227); cursor: pointer;">
	        	<div class="sliceMonitorIconIn" id="sliceMonitorIcon">
	        </td>
        </tr>
        <tr>
	        <td>
	        <div class="OpenContainer-header" style="text-align: left;">
	     	   <div class="OpenContainer-image"><span class="OpenContainer-title">Monitor</span></div>
		        <div class="OpenContainer-button-div"><span class="OpenContainer-button" style="cursor: pointer;" onclick="closeMonitor();">[x]&nbsp;</span></div>
		        <div class="OpenContainer-button-div"><span class="OpenContainer-button" style="cursor: pointer;" onclick="maxMonitor();">[+]&nbsp;&nbsp;</span></div>
		        <div class="OpenContainer-button-div"><span class="OpenContainer-button" style="cursor: pointer;" onclick="minMonitor();">[-]&nbsp;&nbsp;</span></div>
	        </div>
	        <div class="OpenContainer-container" style="height: 100%; overflow: hidden;">
	        	<div id="monitor_content" style="display:none; overflow:hidden;" align="center">
						<div class="minimenu" id="minimenuMonitorContent" style="height: 34px">
					                <div class="buttonBar">
						            	<input type="button" class="BTNselectAll" onclick="checkAllOptions('boxEventos[]', true);" onmouseover="minimenuInfoSet('minimenuMonitorContent', 'Seleccionar todos los eventos');" onmouseout="minimenuInfoSet('minimenuMonitorContent', '');">
										<input type="button" class="BTNunselectAll" onclick="checkAllOptions('boxEventos[]', false);" onmouseover="minimenuInfoSet('minimenuMonitorContent', 'No seleccionar ningun evento');" onmouseout="minimenuInfoSet('minimenuMonitorContent', '');">
					                    <input type="button" class="BTNprocessAll" onclick="openPopUpLeerEventosSelected();" onmouseover="minimenuInfoSet('minimenuMonitorContent', 'Procesar todos los eventos seleccionados');" onmouseout="minimenuInfoSet('minimenuMonitorContent', '');">
					                    <input type="button" class="BTNcancel" onclick="clearEventosMonitorFromMap();" onmouseover="minimenuInfoSet('minimenuMonitorContent', 'Borrar todas las marcas de eventos del monitor impresas en el mapa');" onmouseout="minimenuInfoSet('minimenuMonitorContent', '');">
					                </div>
					                <div class="infoBar"></div>
					    </div>
						<div id="monitorListScroll" style="overflow:auto; width:100%; background:#E3E3E3; height:300px;">
					    	<div id="divMonitorList"></div>
					    </div>
				</div>
			<div>
	        </td>
        </tr>
        </table>
    </div>
 
 	 <div style="clear: both;top:100%;opacity:0.9;position:absolute;z-index:1021;" id="reportesMenu">
    	<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
    	<tr>
	    	<td width="10" valign="middle" bgcolor="#ffc0c0" align="center" onclick="collapseReportes();" style="background: url(&quot;images/collapsableBarBG.gif&quot;) repeat-y scroll 0% 0% rgb(227, 227, 227); cursor: pointer;">
	        	<div class="sliceReportesIconIn" id="sliceReportesIcon">
	        </td>
        </tr>
        <tr>
	        <td>
	        <div class="OpenContainer-header" style="text-align: left;">
	     	   <div class="OpenContainer-image"><span class="OpenContainer-title">Reportes</span></div>
		        <div class="OpenContainer-button-div"><span class="OpenContainer-button" style="cursor: pointer;" onclick="closeReportes();">[x]&nbsp;</span></div>
		        <div class="OpenContainer-button-div"><span class="OpenContainer-button" style="cursor: pointer;" onclick="maxReportes();">[+]&nbsp;&nbsp;</span></div>
		        <div class="OpenContainer-button-div"><span class="OpenContainer-button" style="cursor: pointer;" onclick="minReportes();">[-]&nbsp;&nbsp;</span></div>
	        </div>
	        <div class="OpenContainer-container" style="height: 100%; overflow: hidden;">
	        	<div id="reportes_content" style="display:none; overflow:hidden;" align="center">
						<div id="ReportesListScroll" style="overflow:auto; width:100%; background:#E3E3E3; height:300px;">
					    	<div id="divReportesList">
						    	<div class="reportesHistoricos">
									<div>
										 <ul id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
								            <!-- Tabs go here -->
								        </ul>
								        <div id="content">
								            <!-- Tab content goes here -->
								        </div>
									</div>
								</div><!-- End reportesHistoricos -->
					    	</div>
					    </div>
				</div>
			<div>
	        </td>
        </tr>
        </table>
    </div>
  </div>
  <script type="text/javascript">
    defaultDimensionsMaps(cantMapas);
  </script>
  
  <?php $fecha=mktime(0,0,0,1,1,2010); ?>
  <script>
	var mapOptions;
	var projection; //proyeccion del mapa
	var displayProjection; //proyeccion del display
	var monitorButton = null;
	var tableroContainer = null;
	function loadlibraries(){
		document.getElementById('mapLoadingPanel').style.display = "block";
		dinamicIncludes_Map.includePreload();
	}

	function initialize() {
	  	//dinamicIncludes_Map.includeGeneral();
		cMapController = new cMapController();
		for(var n=0; n < cantMapas; n++){
			cMapController.addMap(new cMapa());
		}
	   	cMapController.setActive(0);
	  	cMapController.getMapActive().setCuentaSeguimiento(<?="'".$_GET['cuentaSelectSegui']."'"?>);
		cMapController.getMapActive().setSeleccionActual("-1");
		<? if (isset($_GET['cuentaSelectSelection'])) {?>
			cMapController.getMapActive().setSeleccionActual(<?="'".$_GET['cuentaSelectSelection']."'"?>);
		<? } ?>;
		MOVILES_VISIBLES = cMapController.getMapActive().getCuentaSeguimiento();
		<?php if (isset($_GET['movilesVISIBLES'])) {?>
			MOVILES_VISIBLES = <?="'".$_GET['movilesVISIBLES']."'"?> ;
		<?php } ?>;

		<?php 
			 if ($LOGIN->objetivoDB == 5){?>
				FIJOS_VISIBLES = <?="'".$_GET['cuentaSelectSegui']."'"?>
		<?php }
		?>

	  	document.getElementById("busyImg").style.visibility = "hidden";
	  	AccordionMenu = new Spry.Widget.Accordion("AccordionMenu");

		cMapController.initMaps();
		mapServersList = vMAPAS_DISPONIBLES.split(",");
		//Controles OpenLayers
		for(var i=0;i<cantMapas;i++){
			cMapController.getMapById(i).initServers(i);
			cMapController.getMapById(i).initControls(i);
			cMapController.getMapById(i).setLonLat(new OpenLayers.LonLat(parseFloat(<?=$_GET['y']?>), parseFloat(<?=$_GET['x']?>)).transform(cMapController.getMapById(i).getDisplayProjection(), cMapController.getMapById(i).getProjection()));
			cMapController.getMapById(i).getMap().setCenter(cMapController.getMapById(i).getLonLat(), cMapController.getMapById(i).getZoomInitialMap());
		}
		for(var i=cantMapas;i<6;i++){
			$j("#map"+i).css("display","none");
		}

		dinamicIncludes_Map.setMessage('Cargando MOVILES...');
		CargarMisGruposVehiculos();
		if (LOGIN.objetivoDB == 5){
			CargarMisFijos();
		}
		//-------------------------------------
		vehiculosCargadosFlag  = true;
        RefreshForm();
		cMapController.initMapEvents();
		resizear();
		setInterval("AutoRefreshForm();", eval(<?= GMAP_MAPA_REFRESH_AVL ?>) * 1000);
		jscolor.init();
		initialMap(0);
		collapseMonitor();
    }

	 function handleMeasurements(event) {
            var geometry = event.geometry;
            var units = event.units;
            var order = event.order;
            var measure = event.measure;
            var out = "";
            if(order == 1) {
                out += "measure: " + measure.toFixed(3) + " " + units;
            } else {
                out += "measure: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
            }
        }

	function unload(){
		//unloadBody();
	}

    function cleanAllStates(){
		if (LOGIN.PERMISOS[0])
			cleanEstadoNuevoGrupoVehiculos();
		if ((LOGIN.PERMISOS[7])&&(dinamicIncludes_Map.isMisPuntosInclude())){
    		cleanEstadoNuevoPunto();
	    	cleanEstadoModificarPunto();
    		cleanEstadoBuscarPunto();
    		cleanEstadoNuevoGrupo();
			}
		if ((LOGIN.PERMISOS[8])&&(dinamicIncludes_Map.isMisZonasInclude()))
			cMapController.getMapActive().cleanEstadoNuevaZona();
		if ((LOGIN.PERMISOS[9])&&(dinamicIncludes_Map.isLogisticaInclude())){
    		cleanEstadoNuevaRegla();
    		cleanEstadoAplicarRegla();
			}
    }
    function resizear() {
    	var theHeight = 0;
    	if (window.innerHeight) {
    		theHeight=window.innerHeight;
    	}
    	else if (document.documentElement && document.documentElement.clientHeight) {
    		theHeight=document.documentElement.clientHeight;
    	}
    	else if (document.body) {
    		theHeight=document.body.clientHeight;
    	}
    	if (theHeight > 590){
    		mapHeight = theHeight - 90;
    	}
    	else {
    		mapHeight = 500;
    	}

		document.getElementById('gMapMenuBar').style.height = mapHeight + "px";
		document.getElementById('mapLoadingPanel').style.height = theHeight + 'px';

	/*	if (dinamicIncludes_Map.isGeneralInclude()){
			for(var i=0;i<cantMapas;i++){
				if(vMaps[i].getMap() != null){
					vMaps[i].getMap().updateSize();
				}
				if (vMonitorButton[i] != null)
					vMonitorButton[i].redraw();
				if (vTableroContainer[i] != null)
					vTableroContainer[i].redraw();
			}
		}
	*/
    }


	function initializeGlobalVars(){
		LOGIN = jQuery.parseJSON('<?= $loginJSON ?>');
		mapCanvas = document.getElementById('map_canvas0');
		inPerUnit = OpenLayers.INCHES_PER_UNIT.m * metersPerUnit;
		OpenLayers.INCHES_PER_UNIT["dd"] = inPerUnit;
	    OpenLayers.INCHES_PER_UNIT["degrees"] = inPerUnit;
    	OpenLayers.DOTS_PER_INCH = 96;
		mapIcons = new MapIcons({
						misPuntos: LOGIN.PERMISOS[4]
					});
	}

	var _loadingBar = new ProgressBar({
								width: '150px',
     							container: 'mapLoadingBar'
     						  });

</script>
</body>
</html>
